<template>
	<div class="zhuye">
		<transition name='slide'>
		    <router-view class='view-box'></router-view>
		</transition>
		<footer>
			<ul>
				<li v-for='(item,index) in listinfos'
					@click="$router.push({path:item.path})" 
					@touchstart='currIndex = index'  
					:class ="{active:currIndex == index}" >
					<span><img :src="item.imgss" /></span>
					<p>{{item.text}}</p>
				</li>
			</ul>
	    </footer>
	</div>

</template>
<script>
 import axios from 'axios'
export default {
  name:'zhuye',
  data () {
  	return {
  		listinfos:[
	        {
	            imgss:"../../static/img/baike.png",
	            text:'泡百科',
	            path:'/home_index'
	        },
	        {
	            imgss:"../../static/img/jiankang.png",
	            text:'泡健康',
	            path:'/jianKang'
	        },
	        
	        {
	            imgss:"../../static/img/wenhua.png",
	            text:'泡文化',
	            path:'/culture'
	        },
	        {
	            imgss:"../../static/img/chaqu.png",
	            text:'泡茶趣',
	            path:'/chaQu'
	        }
			        
			 ],
			   currIndex:0,
			   tab:1
  	}
  }
}
</script>

<style scoped lang="less">
@import '.././assets/less/culture.less';
.slide-enter{
	transform: translateX(100%);
}
.slide-enter-active{
	transition:all .3s ease;
}
.slide-leave-active{
	transform: translateX(-100%);
	transition:all .3s ease;
}
.zhuye{
	position: relative;
	height: 100%;
	.view-box{
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
	}
}

footer{
	.active{
            background: #42B983!important;
            color: white!important;
            padding: 23px 0px;
	        }
	.px2rem(height,160);
	 width: 100%;
    .font-size(35);
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #2C3E50;
	ul{
		display:flex;
	    align-items: center;
	    justify-content: space-around;
	    li{
	        color: #9c9a9c;
	        width: 25%;
	        span{
	            img{
	                .px2rem(width,65);
	                .px2rem(height,70);
	            }
	        }
	    }
	}
}	
</style>